<template>
    <!-- 最外层的容器 -->
    <div class="wl-dropdown">
        <!-- 触发元素 -->
        <wl-tooltip :trigger="trigger" :placement="placement" :open-delay="openDelay" :close-delay="closeDelay"
            :manual="manual" @visible-change="visibleChangeHandler" ref="tooltipRef">
            <slot></slot>
            <template #content>
                <ul class="wl-dropdown__menu">
                    <template v-for="item in menuOptions" :key="item.key">
                        <!-- 这个li标签是用来做分割线的 -->
                        <li v-if="item.divided" class="divided-placeholder"></li>
                        <li class="wl-dropdown__item" :class="{
                            'is-disabled': item.disabled
                        }" :id="`dropdown-item-${item.key}`" @click="itemClick(item)">
                            <RenderVnode :v-node="item.label" />
                        </li>
                    </template>

                </ul>
            </template>
        </wl-tooltip>
    </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import RenderVnode from '../Common/RenderVnode';
import propsObj from './props';
const emit = defineEmits(['select', 'visible-change'])
const tooltipRef = useTemplateRef('tooltipRef')
defineOptions({
    name: 'wl-dropdown'
})
const props = defineProps(propsObj)
const itemClick = (item) => {
    if (item.disabled) return
    emit('select', item)
    // 之后我们再这里添加一个判断
    // 如果用户传递了 hideAfterClick 属性
    // 说明需要点击后关闭下拉菜单
    // 这里我们就手动的调用 hide 方法关闭即可
    if (props.hideAfterClick) tooltipRef.value.hide()
}
const visibleChangeHandler = () => {

}
</script>

<style scoped lang="scss"></style>